<template>
  <div class="statistics-data-container">
    <!-- search -->
    <el-card class="search-card" style="width: 70%; margin-left: auto;">
      <el-form :model="searchForm" label-width="120px" @submit.prevent="searchData">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-form-item label="按年月查询">
              <el-date-picker
                v-model="searchForm.month"
                type="month"
                placeholder="选择年月"
                format="YYYY-MM"
                value-format="YYYY-MM"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="searchForm.startTime"
                type="datetime"
                placeholder="选择开始时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="searchForm.endTime"
                type="datetime"
                placeholder="选择结束时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3" style="text-align: right; display: flex; align-items: flex-end; justify-content: flex-end;">
            <div style="padding-bottom: 10px;">
              <el-button type="primary" @click="searchData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- search -->

    <!-- Work Data Table -->
    <el-card class="table-card" style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span>作业数据</span>
        </div>
      </template>
      <ProTable
        ref="workDataTableRef"
        :request-api="getWorkDataListWithParams"
        :columns="workDataColumns"
        :pagination="true"
        class="data-table"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getWorkDataList } from '@/api/modules/datainfo/dataStatistics';
import type { WorkDataInfo } from '@/api/types/datainfo/dataStatistics';
import type { ColumnProps } from '@/components/ProTable/interface';
import ProTable from '@/components/ProTable/index.vue';
import { ElMessage } from 'element-plus';

defineOptions({
  name: 'StatisticsDataList'
});

// 搜索表单
const searchForm = ref({
  month: getCurrentMonth(),
  startTime: '',
  endTime: ''
});

// 获取当前月份的函数
function getCurrentMonth() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  return `${year}-${month}`;
}

// Store search parameters
let currentSearchParams: Record<string, any> = {};

// 表格引用
const workDataTableRef = ref();

// Work data table columns
const workDataColumns: ColumnProps<WorkDataInfo>[] = [
  { prop: 'id', label: 'ID', width: 100 },
  { prop: 'originalFilename', label: '原始文件名', width: 200 },
  { prop: 'fileType', label: '文件类型', width: 120 },
  { prop: 'fileSize', label: '文件大小', width: 120 },
  { prop: 'processStatusDisplay', label: '处理状态', width: 120 },
  { prop: 'carNumber', label: '车牌号', width: 150 },
  { prop: 'deptName', label: '部门名称', width: 150 },
  { prop: 'createTime', label: '创建时间', width: 180 }
];

// API functions with search parameters
const getWorkDataListWithParams = (params: any) => {
  return getWorkDataList({ ...currentSearchParams, ...params });
};

// 搜索数据
const searchData = async () => {
  try {
    // Update search parameters
    const params: Record<string, any> = {};
    
    // 如果选择了年月，使用年月查询
    if (searchForm.value.month) {
      params.month = searchForm.value.month;
    } 
    // 否则使用开始时间和结束时间查询
    else {
      if (searchForm.value.startTime) {
        params.startTime = searchForm.value.startTime;
      }
      if (searchForm.value.endTime) {
        params.endTime = searchForm.value.endTime;
      }
    }
    
    // Store the search parameters for use in table requests
    currentSearchParams = { ...params };
    
    // Refresh table data
    if (workDataTableRef.value) {
      workDataTableRef.value.getTableList();
    }
  } catch (error) {
    ElMessage.error('查询数据失败');
    console.error('Failed to search data:', error);
  }
};

// 重置搜索条件
const resetSearch = () => {
  searchForm.value = {
    month: getCurrentMonth(),
    startTime: '',
    endTime: ''
  };
  searchData();
};

// 组件挂载时加载数据
onMounted(() => {
  searchData();
});
</script>

<style scoped lang="scss">
.statistics-data-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

/* Ensure tables have a minimum height when empty */
.data-table {
  min-height: 300px;
}

.data-table:deep(.table-main) {
  min-height: 250px;
}

/* Ensure table-empty image is displayed completely */
.data-table:deep(.table-empty) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;
}

.data-table:deep(.table-empty img) {
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

.data-table:deep(.table-empty div) {
  font-size: 14px;
  color: #909399;
}
</style>